<template>
	<view class="main">
		<view class="form">
			<view class="form-item">
				<text>选择区域：</text>
				<picker mode="selector" :range="data.areaList" @change="onAreaChange">
					<view class="picker">
						{{ data.selectedArea || '请选择区域' }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text>选择车位：</text>
				<picker mode="selector" :range="data.parkingList" @change="onParkingChange"
					:disabled="!data.selectedArea">
					<view class="picker">
						{{ data.selectedParking || '请选择车位' }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text>申请时长：</text>
				<picker mode="selector" :range="data.durationList" @change="onDurationChange">
					<view class="picker">
						{{ data.selectedDuration || '请选择时长' }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text>总金额：</text>
				<text class="amount">{{ data.totalAmount ? `¥${data.totalAmount}` : '未计算' }}</text>
			</view>
		</view>
		<view style="display: flex;justify-content: center; margin-top: 20px;">
			<wd-button @click="confirm"
				:disabled="data.selectedParking == '' || data.selectedDuration== ''">提交申请</wd-button>
		</view>
		<wd-message-box></wd-message-box>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue'
	import {
		useMessage
	} from '@/uni_modules/wot-design-uni'

	const message = useMessage()
	const data = reactive({
		areaList: ['区域A', '区域B', '区域C'],
		parkingData: {
			'区域A': ['A1', 'A2', 'A3'],
			'区域B': ['B1', 'B2', 'B3'],
			'区域C': ['C1', 'C2', 'C3']
		},
		durationList: ['1年', '2年', '3年'],
		pricePerYear: 1000, // 每年价格
		selectedArea: '',
		selectedParking: '',
		selectedDuration: '',
		totalAmount: 0,
		parkingList: [] // 动态车位列表
	})

	const onAreaChange = (e) => {
		const index = e.detail.value
		data.selectedArea = data.areaList[index]
		data.parkingList = data.parkingData[data.selectedArea] || []
		data.selectedParking = '' // 重置车位选择
	}

	const onParkingChange = (e) => {
		const index = e.detail.value
		data.selectedParking = data.parkingList[index]
	}

	const onDurationChange = (e) => {
		const index = e.detail.value
		data.selectedDuration = data.durationList[index]
		const years = parseInt(data.selectedDuration)
		data.totalAmount = years * data.pricePerYear
	}


	function confirm() {
		message
			.confirm({
				msg: `${data.selectedArea} ${data.selectedParking} ${data.selectedDuration}`,
				title: '确定车位申请信息'
			})
			.then(() => {
				console.log('点击了确认按钮')
			})
			.catch(() => {
				console.log('点击了取消按钮')
			})
	}
</script>

<style>
	.main {
		min-height: 100vh;
		background-color: rgb(238, 238, 238);
		padding: 2vw;
	}

	.form {
		background-color: #fff;
		padding: 16px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.form-item {
		margin-bottom: 16px;
	}

	.picker {
		background-color: #f6f6f6;
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		margin-top: 4px;
	}

	.amount {
		font-weight: bold;
		color: #ff5722;
	}
</style>